<html>
    <head>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">

            <!--不带自定义 attribute的组件-->
            <ol>
                <!--创建一个 todo-item组件的实例-->
                <todo-item></todo-item>
            </ol>

            <!--带有自定义attribute的组件-->
            <ol>
                <todo-item2 v-for="item in groceryList" v-bind:todo="{{item}}" v-bind::key="item.id">
                </todo-item2>
            </ol>
        </div>
        <script>
            /*
                组件系统是Vue中的一个重要概念，因为它是一种抽象，允许我们使用 小型、独立、可复用的组件构建大型应用g
                仔细想想，几乎任意类型的应用界面都可以抽象为一个"组件树"

                在Vue里，一个组件本质上是一个"拥有预定义选项"的一个Vue实例。
                一个组件就是一个vue实例。
               
            */


            Vue.component('todo-item',{
                template:'<li>这是个待办事项</li>'  // 组件模板中的文本是固定的
            })

            Vue.component('todo-item2',{
                // todo-item2组件现在接受一个 "prop" ,prop 就是对象的属性，当应用在组件标签上，就等于是一个自定义的组件标签的attribute
                // 现在，这个组件标签的自定义attribute名为: 'todo'
                props:['todo'] , // 可以接收任意多的自定义attribute
                template:'<li>{{todo.text</li>'
            });

            var app = new Vue({
                el:'#app',
                data:{
                    groceryList: [
                        { id: 0, text: '蔬菜' },
                        { id: 1, text: '奶酪' },
                        { id: 2, text: '随便其它什么人吃的东西' }
                        ]
                }
            });


            // ★、组件与自定义元素的关系
                /*
                    你可能已经注意到Vue组件非常类似于"自定义元素"(web组件规范的一部分)，这是因为Vue的组件语法部分参考了该规范。
                    
                */
        </script>
    </body>
</html>